<!--周建威-->
<!--2017/12/22-->
<template>
    <section>
        <!--搜索start -->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters"  @submit.native.prevent>
                <el-form-item label="回复名称">
                    <el-input v-model.trim="filters.message_name" placeholder="请选择"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="filters.type"  placeholder="回复类型" clearable>
                        <el-option
                                v-for="(value, key) in typeList"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="filters.event"  placeholder="触发类型" clearable>
                        <el-option
                                v-for="(value, key) in eventList"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-select v-model="filters.status"  placeholder="状态" clearable>
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="禁用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="handleList" icon="el-icon-search">搜索</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="success" v-on:click="handleRestFilters" icon="el-icon-refresh">重置</el-button>
                    <el-button type="primary" v-on:click="visible.addForm=true" icon="el-icon-circle-plus-outline">新增
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--搜索end  -->
        <el-table :data="msgList" highlight-current-row v-loading="visible.listLoading" style="width: 100%;">

            <el-table-column type="index" >
            </el-table-column>
            <el-table-column prop="message_name" label="回复名称" >
            </el-table-column>
            <el-table-column prop="type" label="回复类型" >
                  <span slot-scope="scope">
                    {{typeList[scope.row.type]}}
                </span>
            </el-table-column>
            <el-table-column prop="event" label="触发类型" >
                <span slot-scope="scope">
                    {{eventList[scope.row.event]}}
                </span>
            </el-table-column>
            <el-table-column prop="message_rule" label="触发文字" >
            </el-table-column>
            <el-table-column prop="message_send" label="回复文字内容" >
            </el-table-column>
            <el-table-column prop="media_id" label="素材id" >
            </el-table-column>
            <el-table-column prop="click_key" label="点击key值" >
            </el-table-column>
            <el-table-column prop="url" label="链接url" >
            </el-table-column>
            <el-table-column prop="trigger_time" label="触发次数" >
            </el-table-column>
            <el-table-column label="状态" width="150">
                <template slot-scope="scope">
                   <span>{{scope.row.status==1?'启用':'禁用'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="210">
                <template slot-scope="scope">
                    <span class="color-blue pointer " @click="handleDelete(scope.row.message_id)">删除</span>
                    <span class="color-blue pointer ml-20" @click="handleEdit(scope.row.message_id)" v-if="scope.row.status==0">启用</span>
                    <span class="color-blue pointer ml-20" @click="handleEdit(scope.row.message_id)" v-if="scope.row.status==1">禁用</span>
                    <!--<el-button size="small" type="danger" icon="el-icon-delete" @click="deleteOption(scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <!--分页start -->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                           :total="pagination.total"
                           @current-change="handlePageChange" @size-change="handleSizeChange">
            </el-pagination>
        </el-col>
        <!--分页end  -->

        <!--新增start -->
        <el-dialog title="提示" :visible.sync="visible.addForm" width="500px">
            <div slot="title" class="dialog-title">
                新增自定义回复
            </div>
            <el-form :model="addForm" ref="addForm"  label-width="100px" @submit.native.prevent >
                <el-form-item label="回复名称" prop="message_name" :rules="{required: true, message: '请输入回复名称', trigger: 'blur'}">
                    <el-input v-model="addForm.message_name"  placeholder="回复名称" ></el-input>
                </el-form-item>
                <el-form-item label="回复类型" prop="type">
                    <el-select v-model="addForm.type"  placeholder="请选择">
                        <el-option
                            v-for="(value, key) in typeList"
                            :key="key"
                            :label="value"
                            :value="key">
                     </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="触发条件" prop="type">
                    <el-select v-model="addForm.event"  placeholder="请选择">
                        <el-option
                                v-for="(value, key) in eventList"
                                :key="key"
                                :label="value"
                                :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="匹配的文字" prop="message_rule"  v-show="addForm.event=='text'" :rules="textRules">
                    <el-input v-model.trim="addForm.message_rule" placeholder="接收到的消息"></el-input>
                </el-form-item>
                <el-form-item label="素材id" prop="media_id" :rules="mediaRules"
                              v-show="addForm.type=='image'||addForm.type=='video'||addForm.type=='radio'">
                    <el-input v-model.trim="addForm.media_id" placeholder="素材id"></el-input>
                </el-form-item>
                <el-form-item label="key值" prop="click_key" :rules="keyRules"
                              v-show="addForm.event=='click'">
                    <el-input v-model.trim="addForm.media_id" placeholder="菜单设置中的key值"></el-input>
                </el-form-item>
                <el-form-item label="链接" prop="url" v-show="addForm.type=='link'" :rules="linkRules">
                    <el-input  v-model.trim="addForm.url" placeholder="链接"></el-input>
                </el-form-item>
                <el-form-item label="回复内容" prop="message_send" v-show="addForm.type=='text'||addForm.type=='link'" :rules="typeTextRules">
                    <el-input type="textarea" v-model.trim="addForm.message_send" placeholder="回复的内容"></el-input>
                </el-form-item>
                <!--<el-form-item label="状态">-->
                    <!--<el-switch v-model="addForm.status" :active-value="1"  :inactive-value="0"   active-color="#13ce66"-->
                               <!--inactive-color="#ff4949">-->
                    <!--</el-switch>-->
                <!--</el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="visible.addForm = false">取 消</el-button>
            <el-button type="primary" @click="handleAdd()" :loading="addLoading">确 定</el-button>
             </span>
        </el-dialog>
        <!--新增end -->
    </section>
</template>
<script>
import {getWeChatMessages, checkRule, addWeChatMessage, deleteWeChatMessage, editWeChatMessageStatus} from '../../api/api'
export default {
  data () {
    return {
      pagination: {
        total: 0
      },
      msgList: [],
      addLoading: false,
      filters: {
        message_name: '',
        status: '',
        text: '',
        event: '',
        pageSize: 10,
        page: 1
      },
      visible: {
        addForm: false,
        editForm: false,
        listLoading: false
      },
      typeList: {
        text: '文字',
        link: '链接',
        image: '图片',
        radio: '语音',
        video: '视频'
      },
      eventList: {
        text: '收到文字',
        click: '菜单点击',
        subscribe: '订阅'
      },
      addForm: {
        message_name: '',
        message_rule: '',
        message_send: '',
        status: 0,
        type: 'text',
        media_id: '',
        event: 'text',
        url: '',
        click_key: ''
      },
      textRule: {
        message_rule: [
          {required: true, message: '请输入规则', trigger: 'blur'}
        ],
        message_send: [
          {required: true, message: '请输入回复内容', trigger: 'blur'}
        ]
      },
      mediaRule: {
        media_id: [
          {required: true, message: '请输入素材id', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    addFormRules () {
      if (this.addForm.type === 'text' && this.addForm.event === 'text') {
        return this.textRule
      }
      if (this.addForm.type === 'image' || this.addForm.type === 'radio' || this.addForm.type === 'video') {
        return this.mediaRule
      }
    },
    mediaRules () {
      if (this.addForm.type === 'image' || this.addForm.type === 'radio' || this.addForm.type === 'video') {
        return {required: true, message: '请填写素材id', trigger: 'blur'}
      }
    },
    textRules () {
      if (this.addForm.event === 'text') {
        return [
          {required: true, message: '请输入匹配的文字', trigger: 'blur'},
          {
            validator: (rules, value, callback) => {
              checkRule(value).then(data => {
                if (parseInt(data.status) === 1) {
                  callback()
                } else {
                  callback(new Error('已存在相同的匹配文字'))
                }
              })
            },
            trigger: 'blur'
          }
        ]
      }
    },
    typeTextRules () {
      if (this.addForm.type === 'text' || this.addForm.type === 'link') {
        return {required: true, message: '请输入回复内容', trigger: 'blur'}
      }
    },
    linkRules () {
      if (this.addForm.type === 'link') {
        return {required: true, message: '请输入链接', trigger: 'blur'}
      }
    },
    keyRules () {
      if (this.addForm.event === 'click') {
        return {required: true, message: '请输入key值', trigger: 'blur'}
      }
    }

  },
  methods: {
    // 修改状态
    handleEdit (id) {
      editWeChatMessageStatus(id).then(res => {
        if (parseInt(res.status) === 1) {
          this.handleList();
        }
      })
    },
    // 页码改变
    handlePageChange (page) {
      this.filters.page = page;
      this.handleList();
    },
    // 分页条数改变
    handleSizeChange (size) {
      this.filters.pageSize = size;
      this.handleList();
    },

    // 重置
    handleRestFilters () {
      this.filters = {
        message_name: '',
        status: '',
        text: '',
        event: ''
      }
      this.handleList()
    },
    // 列表
    handleList () {
      this.visible.listLoading = true
      getWeChatMessages(this.filters).then(res => {
        this.msgList = res.data;
        this.pagination.total = parseInt(res.totalCount);
        this.visible.listLoading = false
      })
    },
    // 新增
    handleAdd () {
      this.addLoading = true
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          addWeChatMessage(this.addForm).then(res => {
            if (parseInt(res.status) === 1) {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$refs['addForm'].resetFields()
              this.visible.addForm = false
              this.handleList()
            } else {
              this.$message({
                message: '新增失败',
                type: 'error'
              })
            }
          })
        }
        this.addLoading = false
      })
    },
    // 删除
    handleDelete (id) {
      this.$confirm('确认要删除该规格吗？', '提示', {}).then(() => {
        deleteWeChatMessage(id).then(res => {
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.handleList()
          } else {
            this.$message({
              message: '删除失败',
              type: 'error'
            })
          }
        })
      }, () => {})
    }
  },
  mounted () {
    this.handleList()
  }
}
</script>
<style>

</style>